import Icon, {
  MoonOutlined,
  StopOutlined,
  SunOutlined,
} from '@ant-design/icons';
import { FloatButton } from 'antd';
import { useMemo } from 'react';
import cyberSvg from '../../icons/cyber.svg?react';
import modeSvg from '../../icons/mode.svg?react';
import satelliteSvg from '../../icons/satellite.svg?react';
import streetsSvg from '../../icons/streets.svg?react';
import type { IconType } from '../index.d';
import styles from '../index.module.less';

const ThemeMode: React.FC<{
  themeMode: string;
  onThemeModeClick: (mode: string) => void;
}> = (props) => {
  const { themeMode, onThemeModeClick } = props;

  const icons: IconType = useMemo(
    () => ({
      mode: <Icon component={modeSvg} />,
      dz_streets: <Icon component={streetsSvg} />,
      dz_satellite: <Icon component={satelliteSvg} />,
      dz_cyber: <Icon component={cyberSvg} />,
      dz_light: <SunOutlined />,
      dz_dark: <MoonOutlined />,
      none: <StopOutlined />,
    }),
    [],
  );

  return (
    <FloatButton.Group
      trigger="hover"
      shape="square"
      placement="right"
      className={styles.theme}
      tooltip={{
        title: '设置其它图层',
        placement: 'left',
        rootClassName: styles.tooltip,
      }}
      icon={icons[themeMode || 'mode']}
      onClick={() => onThemeModeClick('')}
    >
      <FloatButton
        icon={icons.dz_streets}
        tooltip="街道图"
        onClick={() => onThemeModeClick('dz_streets')}
      />
      <FloatButton
        icon={icons.dz_satellite}
        tooltip="卫星图"
        onClick={() => onThemeModeClick('dz_satellite')}
      />
      <FloatButton
        icon={icons.dz_cyber}
        tooltip="科技感"
        onClick={() => onThemeModeClick('dz_cyber')}
      />
      <FloatButton
        icon={icons.dz_dark}
        tooltip="暗黑"
        onClick={() => onThemeModeClick('dz_dark')}
      />
      <FloatButton
        icon={icons.dz_light}
        tooltip="明亮"
        onClick={() => onThemeModeClick('dz_light')}
      />
      <FloatButton
        icon={icons.none}
        tooltip="跟随主题"
        onClick={() => onThemeModeClick('')}
      />
    </FloatButton.Group>
  );
};

export default ThemeMode;
